<template>
    <el-dialog v-model="compReportVisible" title="项目详情" @opened="opened" width="80%" @close="closeTxDialog">
        <div class="page-container" v-loading="pageLoading">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>{{merTask.no}}项目状态</span>
                    </div>
                </template>
                <el-steps :active="activeStep" align-center process-status="wait" finish-status="success">
                    <el-step v-for="step in steps" :title="step.label" :key="step.value" />
                </el-steps>
            </el-card>

            <el-card style="margin-top: 10px;">
                <template #header>
                    <div class="card-header">
                        <span>项目详情</span>
                    </div>
                </template>
                <el-descriptions>
                    <el-descriptions-item label="企业名称：">{{merTask?.merchantName}}</el-descriptions-item>
                    <el-descriptions-item label="企业编号：">{{merTask.merNo}}</el-descriptions-item>
                    <el-descriptions-item label="服务商名称：">{{merTask.gsmc}}</el-descriptions-item>
                    <el-descriptions-item label="服务商编号：">{{merTask.sydNo}}</el-descriptions-item>
                    <el-descriptions-item label="项目名称：">{{merTask.name}}</el-descriptions-item>
                    <el-descriptions-item label="项目金额：">{{getJe(merTask)}}</el-descriptions-item>
                    <el-descriptions-item label="项目人数："
                        v-if="merTask.classify ==  2">{{merTask.limitNum}}</el-descriptions-item>
                    <el-descriptions-item label="项目人数：" v-if="merTask.classify ==  1">--</el-descriptions-item>
                    <el-descriptions-item label="所属行业：">{{getIndustry(merTask.industryName,1)}}</el-descriptions-item>
                    <el-descriptions-item label="所属子行业：">{{getIndustry(merTask.industryName,2)}}</el-descriptions-item>
                    <el-descriptions-item label="项目内容：">{{merTask.proContent}}</el-descriptions-item>
                </el-descriptions>
            </el-card>

            <el-card style="margin-top: 10px;">
                <template #header>
                    <div class="card-header">
                        <span>接单人信息</span>
                    </div>
                </template>
                <el-table :data="enrolls.records">
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="cardId" label="身份证号"></el-table-column>
                    <el-table-column prop="cost" label="项目佣金">
                        <template #default="scope">
                            {{proxy?.convertFenToYuan(scope.row.cost)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="verifyStatus" label="竞标状态">
                        <template #default="scope">
                            <dict-tag :options="worker_verify_status" :value="scope.row.verifyStatus" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="taskStatus" label="完工状态">
                        <template #default="scope">
                            <dict-tag :options="woker_task_status" :value="scope.row.taskStatus" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="settlementStatus" label="结算状态">
                        <template #default="scope">
                            <dict-tag :options="settlement_status" :value="scope.row.settlementStatus"
                                v-if="scope.row.payStatus != 4" />
                            <span v-if="scope.row.payStatus == 4">已取消</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="settlementStatus" label="业务确认与服务成果验收单">
                        <template #default="scope">
                            <el-link type="primary" :underline="false" @click="downloadLookFun(ossId)">
                                {{ ossId ? '下载查看' : '暂无文件'}}
                            </el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-if="enrolls.total > 0" v-model:total="enrolls.total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getTaskDetail" />
            </el-card>
            <el-card style="margin-top: 10px;">
                <template #header>
                    <div class="card-header">
                        <span>操作日志</span>
                    </div>
                </template>
                <el-table :data="logRecords">
                    <el-table-column prop="createTime" label="日志时间"></el-table-column>
                    <el-table-column prop="logDesc" label="日志内容"></el-table-column>
                    <el-table-column prop="createRoleId" label="操作角色">
                        <template #default="scope">
                            <dict-tag :options="plat_role" :value="scope.row.createRoleId" />
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>
    </el-dialog>
</template>

  <script lang="ts" setup>
  import type { TaskInfo } from '../types'
  import {taskDetail} from '@/api/projectMgt/proSel/index'
import { downloadLook } from '@/api/projectMgt/index'
  const route = useRoute();
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  const pros = defineProps(['title','openCheck','id','item']);
  const emit = defineEmits(['dialogClose', 'dialogSubmit','flushDetail'])

  const compReportVisible= ref(false)


  compReportVisible.value = pros.openCheck;
  const closeTxDialog =()=>{
      compReportVisible.value = false;
      emit('dialogClose',{tag:1});
 }

  const MapTaskStatus = {
    0: 1,
    1: 2,
    2: 3,
    3: 4,
    4: 5,
    5: 6,
    6: 7,
    7: 8,
    8: 9,
  }

  const pageLoading = ref(true);

  const getIndustry = (industry,tag)=>{
    if(!industry){
        return '--';
    }
    let ids = industry.split(",")
    if(tag == 1){
        return ids[0];
    }else if(tag == 2){
        return ids[1];
    }
  }
  /**
   * TODO
   * 查询角色信息字典
   * 回显label
   * 角色信息字典名称未知
  */
  const list = toRefs<any>(proxy?.useDict("sys_role"));
  const {plat_role} =  toRefs<any>(proxy?.useDict("plat_role"));
  const {worker_verify_status} =  toRefs<any>(proxy?.useDict("worker_verify_status"));
  const {woker_task_status} =  toRefs<any>(proxy?.useDict("woker_task_status"));
  const {settlement_status} =  toRefs<any>(proxy?.useDict("settlement_status"));
const ossId = ref<string>('');

  const taskItem = ref({})
  const data = ref({})

  const queryParams = ref({
    pageNum:1,
    pageSize:10,
    id:null
  })

  taskItem.value = pros.item;

  /**
   * 项目状态
  */
  const steps = computed(() => {
    const list = proxy?.useDict("task_step").task_step
    return list
  })

  //查询任务详情
  const getTaskDetail = ()=>{

    taskDetail(taskItem.value.id,queryParams.value).then(res=>{
        data.value = res.data;
        ossId.value = res.data?.merTask?.ossId || '';
        pageLoading.value = false
    });

  }


  const opened = ()=>{
    queryParams.pageNum = 1;
    queryParams.pageSize = 10;
    getTaskDetail();
}


//   const { data } = useRequest(`/payment/task/${route.query.id}`, 'GET', {}, { immediate: true })

    const merTask = computed<TaskInfo>(() => {
        return data?.value?.merTask || {}
    })

    const getJe = (taskIt)=>{
       if(taskIt.classify == 1){
            return proxy?.convertFenToYuan(taskIt.cost) +" ~ " + proxy?.convertFenToYuan(taskIt.costMax)+"元";
       }else{
            return proxy?.convertFenToYuan(taskIt.cost) +"元";
       }
    }

    const logRecords = computed(() => {
        return data?.value?.logRecords || []
    })

    const enrolls =  computed(() => {
        return data?.value?.enrolls || []
    })


    const dealStep = (stepNum:Number)=>{
        if(stepNum >= 2 && stepNum <=3){
            return 2;
        }else if(stepNum >= 4 && stepNum <=5){
            return 4;
        }else if(stepNum >= 6 && stepNum <=7){
            return 5;
        }else if(stepNum > 7){
            return 6;
        }

        return stepNum;
    }

    const activeStep = computed(() => {
        // alert(dealStep(merTask.value?.taskStatus));
        return  MapTaskStatus[dealStep(merTask.value?.taskStatus)] || -1
    })
    //下载查看
const downloadLookFun = async () => {
    if (!ossId.value) {
        proxy?.$modal.msgError("未找到文件");
        return;
    }    
    const getFileNameFromUrl = (url: string) => {
    if (!url) return '';
        return url.substring(url.lastIndexOf('/') + 1);
    };
// 使用示例
const fileName = getFileNameFromUrl(merTask.value.url) || ossId.value;
    proxy?.download(`resource/oss/download/${ossId.value}`, {}, fileName);    
};

    onMounted(() => {
        // setTimeout(() => {
        //     pageLoading.value = false
        // }, 500);
    })


    watch(() => pros.openCheck, async val => {
            compReportVisible.value =  val;
        }
    );

    watch(() => pros.item, async val => {
            taskItem.value = val;
    }
);

  </script>

  <style scoped lang="scss">
  .page-container {
    height: calc(100vh - 89px);
    overflow-y: auto;

    .footer {
      background: #fff;
      text-align: center;
      z-index: 999;
      margin-top: 20px;
    }
  }
  </style>
